<template>
    <div style="width: 100%;margin: 10px auto;">
        <div class="operation" >
        <el-row type="flex" class="row-bg" justify="start">
            <el-input placeholder="请输入药物名" prefix-icon="el-icon-search" clearable @clear="initData" style="width: 450px;margin-right: 10px" v-model="keyword" @keydown.enter.native="search"></el-input>
            <el-button icon="el-icon-search" type="primary" @click="search">
                搜索
            </el-button>
            <el-col >
                <el-button type="primary" icon="el-icon-plus"  @click="addDepAction">
                    添加药物</el-button>
            </el-col>
        </el-row>
        </div>
        <el-table
                :header-cell-style="{background:'#c3e0cd',color:'#606266'}"
                :fit="true"
                :data="medicine"
                border
                style="margin: 15px">
            <el-table-column
                    type="selection"
                    >
            </el-table-column>
            <el-table-column
                    fixed
                    prop="id"
                    label="药物id"
                    min-width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="药物名称"
                    min-width="80">
            </el-table-column>
            <el-table-column
                    prop="function"
                    label="药物功效"
                    min-width="80">
            </el-table-column>
            <el-table-column
                    prop="sypton"
                    label="药物主治症状"
                    min-width="120">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="药物价格"
                    min-width="75">
            </el-table-column>
            <el-table-column
                    prop="effectionTime"
                    label="药物有效截至日期"
                    min-width="130">
            </el-table-column>
            <el-table-column
                    prop="produceTime"
                    label="药物生产日期"
                    min-width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    min-width="140">
                <template slot-scope="scope">
                    <el-button @click="deleteClick(scope.row)" type="danger" round size="small">删除</el-button>
                    <el-button @click="editData(scope.row)" type="primary" round size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="form" >

                <el-form-item label="药物名称" :label-width="formLabelWidth"  >
                    <el-input v-model="form.name" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="药物价格" :label-width="formLabelWidth" >
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="药物功效" :label-width="formLabelWidth" >
                    <el-input v-model="form.function" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="药物主治症状" :label-width="formLabelWidth">
                    <el-input v-model="form.sypton" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="pushData">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="editDialogVisible"
                width="50%">
            <el-form :model="form">

                <el-form-item label="药物名称" :label-width="formLabelWidth"  >
                    <el-input v-model="form.name" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="药物价格" :label-width="formLabelWidth" >
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="药物功效" :label-width="formLabelWidth" >
                    <el-input v-model="form.function" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="药物主治症状" :label-width="formLabelWidth">
                    <el-input v-model="form.sypton" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clearForm">取 消</el-button>
                <el-button type="primary" @click="pushEditData">确 定</el-button>
            </span>
        </el-dialog>



    </div>
</template>

<script>
    import MY from "../../global_variable";

    export default {
        name: "Medicine",
        data() {
            return {
                keyword:'',
                dialogVisible:false,
                editDialogVisible:false,
                medicine:[],
                formLabelWidth: '120px',
                form:{
                    price:'',
                    function:'',
                    name:'',
                    sypton:''
                },
                total:0,
                currentPage:1,
                pageSize:5,
                medicines:[]
            }
        },
        mounted(){
            this.initData()
        },
        methods:{
            search(){

                this.getRequest(MY.myURL+'/medicine/fuzzyQueryByMedicineName',{name:this.keyword}).then(resp=>{
                    console.log(resp)
                    if(resp.data.code=='4010'){
                        this.medicines=resp.data.data
                        this.total=this.medicines.length
                        let begin=0
                        let end=0
                        if(Math.ceil(this.total/this.pageSize)<this.currentPage){
                            begin=0
                            end=this.pageSize
                            this.currentPage=1
                        }else{
                            begin=(this.currentPage-1)*this.pageSize
                            end=(this.currentPage*this.pageSize)
                        }
                        this.medicine=this.medicines.slice(begin,end)
                        }

                })
            },
            handleSizeChange: function (size) {
                this.pageSize = size;
                console.log(this.pageSize)  //每页下拉显示数据
                if(this.keyword!=''){
                    this.search()
                }else{
                    this.pageRequest(1,this.pageSize)
                }
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                if(this.keyword!=''){
                    this.search()
                }else{
                    this.pageRequest(currentPage,this.pageSize)
                }
                console.log(this.currentPage)  //点击第几页
            },
            deleteClick(row){
                var path = MY.myURL + '/medicine/deleteOneMedicine'
                this.$confirm('此操作将永久删除药物为 '+row.id+'的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var pn={
                        id:row.id
                    }
                    this.getRequest(path,pn).then(resp => {
                        if (resp.data.code == '4005') {
                            console.log(3)
                            this.$message({
                                type: 'success',
                                message: resp.data.message
                            });
                            //this.refreshData()
                            if(this.keyword!=''){
                                this.search()
                            }else{
                                if(this.medicine.length==1){
                                    this.pageRequest(this.currentPage-1,this.pageSize)
                                    this.currentPage-=1
                                }else{
                                    this.pageRequest(this.currentPage,this.pageSize)
                                }
                            }

                        } else {
                            this.$message({
                                type: 'error',
                                message: '该药物已有病人在用，暂不能删除！'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })

            },
            editData(row){
                console.log(row)
                this.editDialogVisible=true
                this.initForm(row)
            },
            pushEditData(){
                console.log(this.form)
                this.getRequest(MY.myURL+'/medicine/updateMedicine',this.form).then(resp=>{
                    console.log(resp)
                    if(resp.data.code=='4009'){
                        this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                        this.clearForm()
                        this.editDialogVisible=false
                        //this.refreshData()
                        if(this.medicine.length==1){
                            this.pageRequest(this.currentPage-1,this.pageSize)
                            this.currentPage-=1
                        }else{
                            this.pageRequest(this.currentPage,this.pageSize)
                        }

                    }
                })

            },
            initData(){
                this.pageRequest(1,5)
            },
            pushData(){
                console.log(this.form)
                this.getRequest(MY.myURL+'/medicine/insertMedicine',this.form).then(resp=>{
                    console.log(resp)
                    if(resp.data.code=='4001'){
                        this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                        this.clearForm()
                        this.dialogVisible=false
                        //this.refreshData()
                        if(this.keyword!=''){
                            this.search();
                        }else{
                            this.pageRequest(Math.ceil((this.total+1)/this.pageSize),this.pageSize)

                        }
                    }
                })

            },
            pageRequest(start,size){
                var pn={
                    pageNum:start,
                    pageSize:size
                }
                this.getRequest(MY.myURL+'/medicine/getMedicineByPage',pn).then(resp=>{
                    console.log('分页')
                    console.log(resp)
                    if(resp){
                        this.medicine=resp.data.data.records
                        this.total=resp.data.data.total
                        this.currentPage=pn.pageNum
                    }
                })

            },
            addDepAction(){
                this.dialogVisible=true

            },
            refreshData(){
                this.initData()
            },
            initForm(row){
                this.form.sypton=row.sypton
                this.form.price=row.price
                this.form.function=row.function
                this.form.name=row.name
                this.form.id=row.id
            },
            clearForm(){
                this.form.sypton=''
                this.form.price=''
                this.form.function=''
                this.form.name=''
                this.form.id=''
            }

        }
    }
</script>

<style scoped>

</style>
